<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta charset="utf-8" />
	<meta http-equiv="expires" content="0" />
	<meta name="language" content="de" />
	<meta name="viewport" content="user-scalable=no,width=device-width" />
	<title>Audi MMI</title>
	
	<!-- CSS -->
	<link rel="stylesheet" href="./Audi_MMI_Files/styles_basics.css" type="text/css">
	<link rel="stylesheet" href="./Audi_MMI_Files/styles_list_basics.css" type="text/css">
	<link rel="stylesheet" href="./Audi_MMI_Files/style_hauptmenue.css" type="text/css">
			
	<!-- JS -->
	<script type="text/javascript" src="./Audi_MMI_Files/controls_key_mappings.js"></script>
	<script type="text/javascript" src="./Audi_MMI_Files/controls_helpers.js"></script>
	<script type="text/javascript">
		var listContents;
		var isReading = 0;
		var currendIndex = 0;
		var entriesPerPage = 4;
		var funcName = 'createListEntryStringConversation';
		var isFirstPage = true;//weil ueber history.back zurück gegangen wird. -> nicht aus app heraus springen
		
		function navigationList(event) {
			var idActualSelection='actualSelectionHauptmenue';
			var navigation = new Array("RouteFinden", "EventFinden", "Favoriten", "Freunde", "RouteErstellen");
			var navigationName = new Array("Route finden", "Event finden", "Favoriten", "Freunde", "Route erstellen");
			var navigationLink = new Array("./audicted_screen_routes.html", "./audicted_screen_events.html", "./audicted_screen_fav.html", "./audicted_screen_freunde.html", "./audicted_screen_routeErstellen.html");
			var selectedDiv = sessionStorage.getItem(idActualSelection);
			
			var e = event || window.event;
			var code = e.keyCode || e;

			switch (code) {
				case SLIDE_LEFT:	
				    
					if (selectedDiv === null) { //von vorne
						selectedDiv=1;
					}
					else{
						document.getElementById(navigation[selectedDiv]).innerHTML=deselectElem(navigation[selectedDiv], navigationName[selectedDiv]);
						if(selectedDiv == 0){
							selectedDiv=5;
						}
					}
					selectedDiv--;
					document.getElementById(navigation[selectedDiv]).innerHTML=selectElem(navigation[selectedDiv], navigationName[selectedDiv]);
					sessionStorage.setItem(idActualSelection, selectedDiv);

					break;
				case SLIDE_RIGHT:
					if (selectedDiv === null) { //von vorne
						selectedDiv=-1;
					}
					else{
						document.getElementById(navigation[selectedDiv]).innerHTML=deselectElem(navigation[selectedDiv], navigationName[selectedDiv]);
						if(selectedDiv==4){
							selectedDiv=-1;
						}
					}
					selectedDiv++;
					document.getElementById(navigation[selectedDiv]).innerHTML=selectElem(navigation[selectedDiv], navigationName[selectedDiv]);
					sessionStorage.setItem(idActualSelection, selectedDiv);
					break;
				case PUSH_WHEEL:
				case PUSH_WHEEL_2:
					location.href=navigationLink[selectedDiv];			
					
					break;
				case BACK:
					if (!isFirstPage)
						history.back();
					break;
				case SK_NW:
					leftTopSoftKey();
					break;
				case SK_NE:
					rightTopSoftKey();
					break;
				case SK_SW:
				case SK_SW_2:
					leftBottomSoftKey();
					break;
				case SK_SE:
				case SK_SE_2:
					rightBottomSoftKey();
					break;
				case VOLUME_UP:
					break;
				case VOLUME_DOWN:
					break;
				case PTT:
					startSpeechInput();
					break;
				default:
					console.info('unkown key pressed. ignoring: ' + e.keyCode);
					break;
			}
		}
		
		function selectElem(selection, name) {
			var ret = '<div id="' + selection + '" class="menuBoxSelected">' + name + '</div>';
			return ret;
		}
		function deselectElem(selection, name) {
			var ret = '<div id="' + selection + '" class="menuBoxUnSelected">' + name + '</div>';
			return ret;
		}
	
		window.onload = function() {
			
		}
		
		function recognitionSucceeded(result) {
			console.log("Voice recognition stopped!");
			text = result.hypotheses[0].utterance;
			console.log("Recognized '" + text + "' with confidence " + result.hypotheses[0].confidence);
			var searchTermSpan = document.getElementById('searchTerm');
			if (text.search(/antwort/i) != -1) {
				sessionStorage.setItem('selectedMail', JSON.stringify(resp[(currendPage * 4 + currendIndex)]));
				location.href = './MMI_Mail_Write.html';
			}
			if (text.search(/neu/i) != -1) {
				sessionStorage.removeItem('selectedMail');
				sessionStorage.setItem('selectedIndexMail', currendIndex);
				location.href = './MMI_List_Contacts.html';
			}
			if (text.search(/such/i) != -1) {
				location.href = './MMI_List_Search.html';
			}
			if (text.search(/vorles/i) != -1 || text.search(/lies/i) != -1 || text.search(/ließ/i) != -1) {
				rightTopSoftKey();
			}
			if (text.search(/stop/i) != -1) {
				rightTopSoftKey();
			}
		}
	</script>
</head>

<body onkeydown="navigationList(event)">
	<div id="mainScreenSubheadline">
		<div id="topPanel">
			<div id="softKeyLeftTop" class="softKey softKeyTop softKeyLeft">
				Logout
			</div>
			<span id="headline">Audicted</span>
			<div id="softKeyRightTop" class="softKey softKeyTop softKeyRight">
				Profil
			</div>
		</div>
		<div id="contentPanel">
			<div id="subHeadline">
				Hauptmenü
			</div>
			<div id="RouteFinden" style="z-index:1; color:white; position:absolute; top:220px; left:70px;"><div class="menuBoxUnSelected">Route finden</div></div>
			<div id="EventFinden" style="z-index:2; color:white; position:absolute; top:140px; left:180px;"><div class="menuBoxUnSelected">Event finden</div></div>
			<div id="Favoriten" style=" z-index:3; color:white; position:absolute; top:140px; left:440px;" ><div class="menuBoxUnSelected">Favoriten</div></div>
			<div id="Freunde" style="z-index:4; color:white; position:absolute; top:220px; left:550px;" ><div class="menuBoxUnSelected">Freunde</div></div>
			<div id="RouteErstellen" style="z-index:5; color:white; position:absolute; top:310px; left:310px" ><div class="menuBoxUnSelected">Route erstellen</div></div>
			
			<img src="./images/hintergrund.png"  style="position:absolute; top:130px; left:49px; z-index:0;">
			<table border="0" height="100%" align="center" valign="middle"><tr height="100%"><td height="100%">
				
				<img src="./images/R8ohne.jpg" border="0" align="center" width="234" height="103" style="position:absolute; top:190px; left:287px;">
				
			</tr></td></table>
		</div>
		<div id="bottomPanel">
			<div id="softKeyLeftBottom" class="softKey softKeyBottom softKeyLeft">
				
			</div>
			<div id="softKeyRightBottom" class="softKey softKeyBottom softKeyRight" style="color:gray">
				
			</div>
		</div>
		<div id="statusScreen">
		</div>
	</div>
</body>
</html>